<script lang="ts" setup name="LoginCallback">
import LoginHeader from './components/login-header.vue'
import LoginFooter from './components/login-footer.vue'
import LoginBind from './components/login-bind.vue'
import LoginPatch from './components/login-patch.vue'
import { ref } from 'vue';
import useStore from '@/store'
import Message from '@/components/message';
import {useRouter} from 'vue-router';

const {user} = useStore()
const hasAccount = ref(true)
const router = useRouter()

// 1. 回跳组件初始化的时候根据QQ的接口获取openId
// 2. 根据openId去自己后台尝试进行登录
// 3. 如果成功，就代表已注册已绑定，记录返回的用户信息，跳转到首页或者来源页面
// api:
// QC.api('get_use_info')      获取用户头像 昵称等信息
// QC.Login.signOut()  退出QQ
// QC.Login.check()    检查是否登录
// QC.Login.getMe(function(openId){    获取openId
//     console.log(openId);   
// })

const isLogin = QC.Login.check()
if(isLogin) {
    QC.Login.getMe(async (openId)=>{
        // console.log(openId);   //0550B7CBC8E29C434B5179285380ED5C
        await user.qqLogin(openId)
        Message.success("登录成功")
        router.push('/')
    })
}

</script>

<template>
  <LoginHeader></LoginHeader>
  <section class="container">
    <nav class="tab">
      <a href="javascript:;" @click="hasAccount=true" :class="{active:hasAccount}">
        <i class="iconfont icon-bind" />
        <span>已有小兔鲜账号，请绑定手机</span>
      </a>
      <a href="javascript:;"  @click="hasAccount=false" :class="{active:!hasAccount}">
        <i class="iconfont icon-edit"/>
        <span>没有小兔鲜账号，请完善资料</span>
      </a>
    </nav>
    <div class="tab-content" v-if="hasAccount">
     <LoginBind></LoginBind>
    </div>
    <div class="tab-content" v-else>
      <LoginPatch></LoginPatch>
    </div>
  </section>
  <LoginFooter></LoginFooter>
</template>

<style scoped lang="less">
.container {
  padding: 25px 0;
}
.tab {
  background: #fff;
  height: 80px;
  padding-top: 40px;
  font-size: 18px;
  text-align: center;
  a {
    color: #666;
    display: inline-block;
    width: 350px;
    line-height: 40px;
    border-bottom: 2px solid #e4e4e4;
    i {
      font-size: 22px;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
      margin-left: 4px;
    }
    &.active {
      color: @xtxColor;
      border-color: @xtxColor;
    }
  }
}
.tab-content {
  min-height: 600px;
  background: #fff;
}
</style>
